<pre>
<?php
echo $this->message; 
if(!$this->showForm) 
{ 
   return;
}
?>
</pre>
<html>
<head>
<title>Upload Progress Bar example</title>

<style type="text/css">
      
        #progressbar {
            position: absolute;
            left: 10px;
            top: 320px;
        }
 
        .pg-progressbar {
            position: relative;
 
            width: 250px;
            height: 24px;
            overflow: hidden;
 
            border: 1px solid #c6c6c6;
        }
 
        .pg-progress {
            z-index: 150;
 
            position: absolute;
            left: 0;
            top: 0;
 
            width: 0;
            height: 24px;
            overflow: hidden;
        }
 
        .pg-progressstyle {
            height: 22px;
 
            border: 1px solid #748a9e;            
			background-color:green;
        }
 
        .pg-text,
        .pg-invertedtext {
            position: absolute;
            left: 0;
            top: 4px;
 
            width: 250px;
 
            text-align: center;
            font-family: sans-serif;
            font-size: 12px;
        }
 
        .pg-invertedtext {
            color: #ffffff;
        }
 
        .pg-text {
            z-index: 100;
            color: #000000;
        }
    </style>
	
	
    <script type="text/javascript">
        function makeRequest(url)
        {
            var httpRequest;
 
            if (window.XMLHttpRequest) {
                httpRequest = new XMLHttpRequest();
                if (httpRequest.overrideMimeType) {
                    httpRequest.overrideMimeType('text/xml');
                }
            } else if (window.ActiveXObject) {
                try {
                    httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    try {
                        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e) {}
                }
            }
 
            if (!httpRequest) {
                alert('Giving up :( Cannot create an XMLHTTP instance');
                return false;
            }
 
            httpRequest.onreadystatechange = function() { evalProgress(httpRequest); };
            httpRequest.open('GET', url, true);
            httpRequest.send('');
 
        }
 
        function observeProgress()
        {
            setTimeout("getProgress()", 1500);
        }
 
        function getProgress()
        {
            makeRequest('uploader/progress?progress_key=' + document.getElementById('progress_key').value);
        }
		
		function isNumber(data)
		{
		   return   (data.search(/^[\+\-]?\d+\.?\d*$/)==0);
		}
 
        function evalProgress(httpRequest)
        {
            try {
                if (httpRequest.readyState == 4) {
                    if (httpRequest.status == 200) {					
						var data = httpRequest.responseText;
						if(!isNumber(data)){
						   alert(data);
						   setTimeout("getProgress()", 1000);
						}
                        else if (data >= 100) {						   
                            finish();
                        } else {
                            update(data);
                            setTimeout("getProgress()", 1000);
                        }
						
                    } else {
                        alert('There was a problem with the request.');
                    }
                }
            } catch(e) {
                alert('Caught Exception: ' + e.description);
            }
        }

        function update(data)
        {
            document.getElementById('pg-percent').style.width = data + '%';

            document.getElementById('pg-text-1').innerHTML = data + '%';
            document.getElementById('pg-text-2').innerHTML = data + '%';
        }

        function finish()
        {
            document.getElementById('pg-percent').style.width = '100%';

            document.getElementById('pg-text-1').innerHTML = 'Upload done';
            document.getElementById('pg-text-2').innerHTML = 'Upload done';
        }
    </script>

</head>


<body>


<!----------------------- upload form example begin ----------------------->
<?php $uid = md5(uniqid(rand()));
require_once 'utility/Utility.php'; 
$maxFileSize = Utility::byteStrToInt(ini_get('upload_max_filesize'));
?>

<form   onSubmit="observeProgress();"
 action="uploader/upload" 
 method="post" enctype="multipart/form-data" 
 name="upload" id="upload" target="upload_frame" >

<?php if(Zend_File_Transfer_Adapter_Http::isApcAvailable()) {   ?>
  <input type="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key" value="<?php echo $uid; ?>" />
<?php } else if(Zend_File_Transfer_Adapter_Http::isUploadProgressAvailable()){?>
  <input type="hidden" name="UPLOAD_IDENTIFIER" id="progress_key" value="<?php echo $uid; ?>" />
<?php } ?>

<input type="hidden" name="MAX_FILE_SIZE" value="<?php echo $maxFileSize?>" id="MAX_FILE_SIZE">

<input type="file" name="file1" id="file1" /><br/>
<input type="file" name="file2" id="file2" />
<br/>
<input type="submit" name="submit" id="submit" value="Upload!" />
  
</form>

<!--Enable this when release: style="display: none"--> 
<iframe id="upload_frame" name="upload_frame"></iframe>

<!------------------------- upload form example end ----------------->

<div id="pb_outer">
  <div id="pb_inner"></div>
</div>

<br/>
  <div id="progressbar">
        <div class="pg-progressbar">
            <div class="pg-progress" id="pg-percent">
                <div class="pg-progressstyle"></div>
                <div class="pg-invertedtext" id="pg-text-1"></div>
            </div>
            <div class="pg-text" id="pg-text-2"></div>
        </div>
    </div>
    <div id="progressBar"><div id="progressDone"></div></div>
</body>
</html>